<!--
 * @Author: wangshuguang
 * @Date: 2022-08-31 15:33:01
 * @LastEditTime: 2022-09-20 16:01:23
 * @LastEditors: wangshuguang
 * @Description: 套餐列表
-->
<template>
  <div class="mealList">
    <div 
      v-for="mealItem of mealDataList" 
      :key="'mealItem_'+mealItem.id" 
      class="mealItem" 
      :class="{mealActive:active == mealItem.id}" 
      @click="$emit('change',mealItem)">
      <div class="mealItem-div_title">
        {{ mealItem.tempName }}
      </div>
      <div class="mealItem-div_bottomBox">
        <div class="mealItem-div_month">{{ calcMonthFlow(mealItem.monthFlow) }}</div>
        <div class="mealItem-div_money">{{ mealItem.price }}元</div>
      </div>
      <img class="mealItem-div_arrow" src="../../../assets/img/flow/arrow.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props:{
    mealDataList:{},
    active: ''
  },
  methods:{
    calcMonthFlow(monthFlow){
      // 如果没有有流量余额 为无限次套餐
      if(!monthFlow){
        return '不限次交互'
      }else{
        // 展示为万次
        return this.$math.div(monthFlow,10000) + '万次交互'
      }
    }
  }
}
</script>

<style scoped  lang='less'>
    /* 老版本⬇ */
  .mealList {
    display: flex;
    margin-bottom: 26px;
    overflow: auto;
    .mealItem {
      min-width: 280px;
      background: #f8f8f8;
      border-radius: 15px;
      padding: 28px 24px;
      flex-shrink: 0;
      margin-right: 26px;
      font-size: 24px;
      overflow: auto;
      position: relative;
      color: #131313;
      .mealItem-div_title {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 24px;
      }
      .mealItem-div_bottomBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .mealItem-div_money{
          font-size: 28px;
          color: #FFB72F;
          font-weight: bold;
          margin-left: 10px;
        }
      }
      .mealItem-div_arrow {
        position: absolute;
        top: 0;
        right: 0;
        display: none;
        width: 64px;
      }
      &.mealActive {
        background: #FFB72F;
        color: #ffffff;
        .mealItem-div_money{
          color: #fff;
        }
        .mealItem-div_arrow {
          display: inline-block;
        }
      }
    }
  }
</style>
